<template>
    <div class="singer-home">
        <!-- 导航栏 -->
        <van-nav-bar 
            title="歌手详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
        <!-- 歌手图片位置 -->
        <img :src="singer.singer_pic" alt="">
        <!-- 标签页 -->
        <van-tabs v-model="active">
            <van-tab title="百科">
                <SingerIntro :singerId = "id"/>
            </van-tab>
            <van-tab title="歌曲">
                <SingerSong :singerid = "id"/>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script> 

import SingerIntro from './compoents/SingerIntro.vue';
import SingerSong from './compoents/SingerSong.vue';

export default{
    data() {
        return {
            //标签页当前的激活页，是标签页tab的默认用法
            active: 0,
            //从HomeSinger.vue中跳转过来。通过路由获取到id，也是歌手的id
            id:this.$route.params.id,
            singer:{}
        };
    },
    created() {
        // 获取歌手图像对象数据
        this.singer = this.$store.state.singer
    },
    methods: {
        onClickLeft() {
            window.history.length > 1 ? this.$router.go(-1) : this.$router.push("/");
        },
    },
    components: {
   
        SingerIntro,
       
        SingerSong
    },

}

</script>
<style  scoped></style>